<template>
  <div>
    <el-alert type="info" show-icon style="margin-bottom: 15px">
      <template slot="title">一共{{ list.counts }}条数据</template>
    </el-alert>
    <el-table :data="list.items" style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="120" />
      <el-table-column prop="subject" label="学科" width="120" />
      <el-table-column prop="catalog" label="目录" width="120" />
      <el-table-column label="题型" width="120">
        <template slot-scope="{ row }">
          {{ row.questionType | questionsType }}
        </template>
      </el-table-column>
      <el-table-column prop="question" label="题干" width="300">
        <template slot-scope="{ row }">
          <div v-html="row.question"></div>
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="180">
        <template slot-scope="{ row }">
          {{ row.addDate | parseTimeByString }}
        </template>
      </el-table-column>
      <el-table-column label="难度" width="80">
        <template slot-scope="{ row }">
          <div>
            {{
              row.difficulty === "1"
                ? "简单"
                : row.difficulty === "2"
                ? "一般"
                : row.difficulty === "3"
                ? "困难"
                : "未知"
            }}
            <!-- {{ row.difficulty }} -->
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="120" />
      <el-table-column prop="chkState" label="审核状态" width="120">
        <template slot-scope="{ row }">
          <div>
            {{
              row.chkState == "0"
                ? "待审核"
                : row.chkState == "1"
                ? "已审核"
                : row.chkState == "2"
                ? "已拒绝"
                : "未知"
            }}
            <!-- {{ row.chkState }} -->
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="120" />
      <el-table-column prop="chkUser" label="审核人" width="120" />
      <el-table-column prop="publishState" label="发布状态">
        <template slot-scope="{ row }">
          <div>
            {{
              row.publishState == "0"
                ? "待发布"
                : row.publishState == "1"
                ? "已发布"
                : row.publishState == "2"
                ? "已下架"
                : "未知"
            }}
          </div>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="{ row }">
          <el-button type="text" size="small" @click="dialogVisible(row.id)"
            >预览</el-button
          >
          <el-button
            type="text"
            size="small"
            :disabled="row.chkState === 1 || row.chkState === 2"
            @click="clickCheck(row.id)"
            >审核</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="$router.push(`/questions/new/?id=${row.id}`)"
            >修改</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="choicePublish(row.id, row.publishState)"
            >{{ row.publishState === 0 ? "上架" : "下架" }}</el-button
          >
          <el-button type="text" size="small" @click="remove(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      style="margin-top: 20px; text-align: right"
      :page-sizes="[2, 5, 10, 20]"
      :page-size="page.pagesize"
      layout="prev,pager,next,sizes,jumper"
      :total="list.counts"
      @size-change="changeSize"
      @current-change="changePage"
    />
    <!-- /分页 -->
    <!-- 审核的弹窗 -->

    <el-dialog title="题目审核" :visible.sync="shenheVisable" width="400px">
      <!-- :before-close="handleClose" -->
      <el-form>
        <el-form-item>
          <el-radio-group v-model="checkdata.chkState">
            <el-radio label="1">通过</el-radio>
            <el-radio label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-input
            type="textarea"
            v-model="checkdata.chkRemarks"
            placeholder="请输入审核意见"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="concel">取 消</el-button>
        <el-button type="primary" @click="btnOK">确 定</el-button>
      </span>
    </el-dialog>

    <!-- /审核的弹窗 -->
    <!-- 预览的弹窗 -->

    <!-- <View :showDialog.sync="showDialog"></View> -->
    <questionsPreview
      :showDialog.sync="showDialog"
      ref="eject"
    ></questionsPreview>
    <!-- /预览的弹窗 -->
  </div>
</template>
<script>
import questionsPreview from '../components/questions-preview'
import { remove, choicePublish, choiceCheck } from '@/api/hmmm/questions.js'
export default {
  name: '',
  components: {
    questionsPreview
  },
  props: {
    list: {
      require: true
    }
  },
  data () {
    return {
      page: {
        page: 1,
        pagesize: 5,
        total: 0
      },
      shenheVisable: false,
      // 审核接口用的数据
      checkdata: {
        id: '',
        chkState: '1',
        chkRemarks: ''
      },
      form: {},
      showDialog: false
    }
  },
  computed: {

  },
  watch: {},
  created () { },
  mounted () { },
  methods: {
    // 显示预览弹出层
    async dialogVisible (id) {
      this.showDialog = true
      this.$refs.eject.detail(id)
      this.id = id
    },

    concel () {
      this.shenheVisable = false
      this.checkdata = {
        id: '',
        chkState: '1',
        chkRemarks: ''
      }
    },
    changePage (newPage) {
      this.$emit('changePage', newPage)
    },
    changeSize (newSize) {
      this.$emit('changeSize', newSize)
    },
    // 删除精选题
    remove (id) {
      this.$confirm('此操作将永久删除该题目,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await remove({ id: id })
          this.$message.success('删除该试题成功！')
          this.$emit('refrash')
        } catch (err) {
          console.log(err)
        }
      }).catch(() => {
        this.$message.info('用户取消删除！')
      })
    },
    // 上架下架
    choicePublish (id, publishState) {
      if (publishState === 0) {
        this.$confirm('您确定上架这道题目吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          try {
            await choicePublish({ id: id, publishState: 1 })
            this.$message.success('上架成功')
            this.$emit('refrash')
          } catch (err) {
            console.log(err)
          }
        }).catch(() => {
          this.$message.info('用户取消上架！')
        })
      } else {
        this.$confirm('您确定下架这道题目吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          try {
            await choicePublish({ id: id, publishState: 0 })
            this.$message.success('下架成功')
            this.$emit('refrash')
          } catch (err) {
            console.log(err)
          }
        }).catch(() => {
          this.$message.info('用户取消下架！')
        })
      }
    },
    // 审核
    async btnOK () {
      if (this.checkdata.chkRemarks === '') {
        this.$message.warning('请输入审核意见')
      } else {
        try {
          this.checkdata.chkState = Number(this.checkdata.chkState)
          // console.log(this.checkdata.chkState)
          await choiceCheck(this.checkdata)
          this.$message.success('操作成功')
          this.$emit('refrash')
          this.shenheVisable = false
        } catch (error) {
          console.log(new Error(error))
        }
      }
    },
    clickCheck (e) {
      this.shenheVisable = true
      this.checkdata.id = e
    }
  }
}
</script>
<style scoped lang='scss'>
.el-dialog__wrapper {
  ::v-deep .el-dialog__footer {
    padding-bottom: 10px;
    padding-right: 15px;
    text-align: right;
  }
}
</style>
